import React, {Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'


export default class App extends Component {

  // 状态在哪里，操作状态的方法就在哪里
  state = {
    todos: [
      {id:'001', name: '吃饭', done: true},
      {id:'002', name: '睡觉', done: true},
      {id:'003', name: '打豆豆', done: false},
    ]
  }

  // 添加
  addTodo = (todoObj) => {
    const {todos} = this.state
    const newTodos = [todoObj, ...todos]
    this.setState ({todos: newTodos})
  }

  // 更新todo
  updateTodo = (id, done) => {
    const newTodos = this.state.todos.map ((todoObj) => {
      if (todoObj.id === id) {
        return {...todoObj, done}
      } else return todoObj
    })
    this.setState ({todos: newTodos})
  }

  // 删除
  deleteTodo = (id) => {
    const {todos} = this.state
    const newTodos = todos.filter ((todoObj) => {
      return todoObj.id !== id
    })
    this.setState ({todos: newTodos})
  }

  // 全选
  checkAllTodo = (done) => {
    const {todos} = this.state
    const newTodos = todos.map ((todoObj) => {
      return {...todoObj, done}
    })
    this.setState ({todos: newTodos})
  }

  // 清除已完成
  clearAllDone = () => {
    const {todos} = this.state
    const newTodos = todos.filter ((todoObj) => {
      return todoObj.done === false
    })
    this.setState ({todos: newTodos})
  }

  render () {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer todos={this.state.todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}></Footer>
        </div>
      </div>
    );
  }
}


